<!-- 菜单 -->
<template>
	<view class="menu-dom">
		<uni-card :is-shadow="false" padding="0" spacing="0" margin="0" :border="false">
			<uni-grid :column="4" :showBorder="false" :square="false">
				<uni-grid-item v-for="(item,index) in MENUDATA" :key="index">
					<navigator :url="item.url" hover-class="none">
						<view v-if="item.key == 'Hetong'" class="grid-item-box">
							<uni-badge class="uni-badge-left-margin" :offset="[-20, 6]" :is-dot="true" :text="1" absolute="rightTop" size="normal">
							</uni-badge>
							<image :src="item.icon" mode="heightFix" style="height: 80rpx;"></image>
							<text>{{item.title}}</text>
						</view>
						<view v-else class="grid-item-box">
							<image :src="item.icon" mode="heightFix" style="height: 80rpx;"></image>
							<text>{{item.title}}</text>
						</view>
					</navigator>
				</uni-grid-item>
			</uni-grid>
		</uni-card>
	</view>
</template>

<script setup lang="ts">
	import { MENUDATA } from "./menuData";
</script>

<style lang="scss" scoped>
	.menu-dom {
		text-align: center;
		color: #646566;
		line-height: 1.5;
		font-size: 24rpx;

		.grid-item-box {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 10px 0;
		}
	}
</style>